import { useParams } from 'react-router-dom';
import { useHistory } from 'react-router-dom';
import { useEffect, useState } from 'react';
import { getTasks, updateTask } from '@/request/tasks';
import toLocalTime from '@/utils/toLocalTime'

const Detail = () => {
   const { id } = useParams();
   const [data, setData] = useState(null);
   let history = useHistory();

   const handleChange = (e) => {
      const value = e.target.value;
      setData({
         ...data,
         title: value,
      });
   };

   const handleUpdate = () => {
      updateTask({
         data: {
            id: data._id,
            title: data.title,
            completed: data.completed,
         },
         showSuccess: true,
         success: () => {
            getOneTask()
         },
      });
   };
   const handleCancel = () => {
      history.replace('/');
   };

   const handleCheck = (e) => {
      const checked = e.target.checked;
      setData({
         ...data,
         completed: checked,
      });
   };

   const getOneTask = () => {
      getTasks({
         data: {
            id,
         },
         success: (data) => {
            if (data.list.length !== 0) {
               setData(data.list[0]);
            }
         },
      });
   };

   useEffect(() => {
      getOneTask();
   }, []);

   if (!data) return <div>Loading...</div>;

   return (
      <div className="mt-24">
         <div className="max-w-lg mx-auto box flex flex-col">
            <h2 className="text-2xl font-bold text-center mb-6 relative">
               <input
                  type="checkbox"
                  className="checkbox absolute right-0 h-6 w-6"
                  checked={data.completed}
                  onChange={handleCheck}
               />
               <span>Edit Task</span>
            </h2>
            <div className="flex flex-col space-y-3">
               <div className="flex w-full items-center">
                  <div className="w-36">Task ID</div>
                  <div className="grow">{data._id}</div>
               </div>
               <div className="flex w-full items-center">
                  <div className="w-36">Create Time</div>
                  <div className="grow">{toLocalTime(data.create_time)}</div>
               </div>
               {data.completed && (
                  <div className="flex w-full items-center">
                     <div className="w-36">Completed Time</div>
                     <div className="grow">{toLocalTime(data.completed_time) || '--'}</div>
                  </div>
               )}

               <div className="flex w-full items-center">
                  <div className="w-36">Task Name</div>
                  <input
                     className="grow"
                     value={data.title}
                     onChange={handleChange}
                  />
               </div>
            </div>
            <div className="w-full flex mt-5 space-x-2">
               <button
                  className="grow btn rounded bg-indigo-600 hover:bg-indigo-800"
                  onClick={handleUpdate}
               >
                  Update
               </button>
               <button
                  className="btn rounded bg-gray-600 hover:bg-gray-800"
                  onClick={handleCancel}
               >
                  Go Back
               </button>
            </div>
         </div>
      </div>
   );
};

export default Detail;
